<template>
  <div class="ja-container">
    <div class="flex-row " style="margin-bottom: 28px;">
      <div class="duigou-con ">
        <el-radio v-model="education" label="FULL" border>全日制</el-radio>
        <span class="duigou" v-show="education === 'FULL'"><li class="duigou-inner el-icon-check"></li></span>
      </div>
      <div class="duigou-con ">
        <el-radio v-model="education" label="INSERVICE" border>在职</el-radio>
        <span class="duigou" v-show="education === 'INSERVICE'"><li class="duigou-inner el-icon-check"></li></span>
      </div>
    </div>
    <div class="flex-row " v-if="education === 'FULL'">
      <div class="material-textfield green form-left" :class="{'validate-err': errors.has('fullTimeEducation')}">
        <input type="text" required v-model="info.fullTimeEducation" key="fullTimeEducation" v-validate="'required|max:40'" name="fullTimeEducation"/>
        <label data-content="全日制教育学历*"></label>
      </div><!--
    --><div class="material-textfield green form-right" :class="{'validate-err': errors.has('fteSchoolProfession')}">
        <input type="text" required v-model="info.fteSchoolProfession" key="fteSchoolProfession"  v-validate="'required|max:40'" name="fteSchoolProfession"/>
        <label data-content="全日制教育毕业院校及专业*"></label>
      </div>
    </div>
    <div class="flex-row" v-if="education === 'INSERVICE'">
      <div class="material-textfield green form-left" :class="{'validate-err': errors.has('workEducation')}">
        <input type="text" required v-model="info.workEducation" key="workEducation"  v-validate="'required|max:40'" name="workEducation"/>
        <label data-content="在职制教育学历*"></label>
      </div><!--
    --><div class="material-textfield green form-right" :class="{'validate-err': errors.has('weSchoolProfession')}">
        <input type="text" required v-model="info.weSchoolProfession" key="weSchoolProfession"  v-validate="'required|max:40'" name="weSchoolProfession"/>
        <label data-content="在职教育毕业院校及专业*"></label>
      </div>
    </div>
    <div class="flex-row" v-if="declareType === 'UNUSUAL'">
      <div class="material-textfield green form-left">
        <input type="text" required v-model="info.certificateNo"/>
        <label data-content="毕业证书编号"></label>
      </div> 
    </div>
    <div class="flex-row" v-if="declareType !== 'UNUSUAL'">
      <div class="material-textfield green form-left" :class="{'validate-err': errors.has('certificateNo')}">
        <input type="text" required v-model="info.certificateNo" v-validate="'required|certificate'" name="certificateNo"/>
        <label data-content="毕业证书编号"></label>
      </div>
    </div>
    <div class="flex-row vip-upload" :class="{'validate-err': errors.has('certificateScanningCopy')}">
      <label class="ewai">上传学历学位相关附件*</label>
      <file-upload
        ref="upload"
        :file-list="fileList"
        v-model="info.certificateScanningCopy"
        v-validate="'required|fileupload'"
        name="certificateScanningCopy"
      >
        <el-button slot="trigger" class="width-200">选择文件</el-button>
        <span slot="tip" class="el-upload__tip">附件提示：请上传学历学位以及学信网证明资料,每个不超过15M</span>
      </file-upload>
    </div>
    <div class="flex-row vip-upload" style="margin-top: 10px;" :class="{'validate-err': !(info.chsi && info.chsi.length > 0) && declareType === 'HOLD' }">
      <label class="ewai">请上传学信网证明资料{{declareType === 'HOLD' ? '*' : ''}}</label>
      <file-upload
        ref="uploadchsi"
        :file-list="fileListChsi"
        v-model="info.chsi"
      >
        <el-button slot="trigger" class="width-200">选择文件</el-button>
        <span slot="tip" class="el-upload__tip">附件提示：请上传学历学位以及学信网证明资料,每个不超过15M</span>
      </file-upload>
    </div>
  </div>
</template>

<script>
  export default {
    title: '学历信息',
    name: 'education-info',
    props: {
      educationinfo: {},
      declareType: {}
    },
    data () {
      return {
        info: {},
        fileList: [],
        fileListChsi: [],
        education: ''
      }
    },
    mounted () {
      this.info = Object.assign({}, this.educationinfo)
      this.$nextTick(() => {
        this.setInit()
      })
    },
    methods: {
      validate () {
        return this.$validator.validateAll()
      },
      setEducation () {
        // 1.有全日制教育 2.有在职教育 3.两者都没有
        if (this.educationinfo.fullTimeEducation) {
          this.education = 'FULL'
        } else if (this.educationinfo.workEducation) {
          this.education = 'INSERVICE'
        } else {
          this.education = 'FULL'
        }
        // if (this.info.fullTimeEducation) {
        //   this.education = 'FULL'
        // } else if (this.info.workEducation && !this.info.fullTimeEducation) {
        //   this.education = 'INSERVICE'
        // } else {
        //   this.education = 'FULL'
        // }
      },
      setInit () {
        this.setEducation()
        if (typeof this.educationinfo.certificateScanningCopy === 'string' && this.educationinfo.certificateScanningCopy.length > 20) {
          let files = JSON.parse(this.educationinfo.certificateScanningCopy)
          if (typeof this.fileList === 'string') {
            files = JSON.parse(this.fileList)
          }
          files.forEach(item => {
            if (!item.type || item.type === 'certificateScanningCopy') {
              this.fileList.push(item)
              this.educationinfo.certificateScanningCopy = this.fileList
            } else if (item.type === 'chsi') {
              this.fileListChsi.push(item)
              this.educationinfo.chsi = this.fileListChsi
            }
          })
        }
      },
      clearFiles () {
        this.$refs.upload.clearFiles()
        this.$refs.uploadchsi.clearFiles()
      }
    },
    watch: {
      'info': {
        handler: function (val, oldVal) {
          this.$emit('update:educationinfo', this.info)
        },
        deep: true
      },
      'education'() {
        this.$nextTick(() => {
          this.$validator.reset()
        })
      }
    }
  }
</script>
